<template>
	<view class="container" :style="{ minHeight: heightVal + 'px' }">
		<custom-nav-bar title="任务" :navHeight="statusHeight" :showBack="false" />
		<view class="nullBox"></view>
		<view class="items">
			<view class="itemtop">远程巡检</view>
			<view class="itembot">
				<u-button @click="toDetail(0)" class="btnStyle" type="primary">查看详情</u-button>
			</view>
		</view>
		<view class="items">
			<view class="itemtop">监理巡查</view>
			<view class="itembot">
				<u-button @click="toDetail(1)" class="btnStyle" type="primary">查看详情</u-button>
			</view>
		</view>
		<view class="items">
			<view class="itemtop">任务清单</view>
			<view class="itembot">
				<u-button @click="toDetail(2)" class="btnStyle" type="primary">任务查看</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			heightVal: undefined,
			statusHeight: 0
		};
	},
	onLoad(option) {
		this.heightVal = uni.getSystemInfoSync().windowHeight;
	},
	onShow() {
		this.statusHeight = uni.getStorageSync('systemHeight');
	},
	methods: {
		toDetail(num) {
			if (num == 0) {
				uni.navigateTo({
					url: './remote/remote'
				});
			} else if (num == 1) {
				uni.navigateTo({
					url: './monitor/monitor'
				});
			} else if (num == 2) {
				uni.navigateTo({
					url: './tasklist/tasklist'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f4f4f4;

	.items {
		width: 690rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		background: #fff;
		box-sizing: border-box;
		padding: 26rpx;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.itemtop {
			font-weight: bold;
			font-size: 36rpx;
		}

		.btnStyle {
			border-radius: 14rpx;
			width: 170rpx;
			height: 60rpx;
			float: right;
			font-size: 28rpx;
		}
	}

	.nullBox {
		height: 30rpx;
	}
}
</style>
